<template>
  <div style="width: 100%;height:100%" v-if="!refreshing">
    <dv-border-box-12 backgroundColor="#19233Ddf" style="width: 1400px;padding: 20px;height:200px;margin-left: 30px"  >
      <div class="bg-color-black" >
        <div class="d-flex jc-center body-box">
          <temp :node-list="nodeList" :link-list="linkList" :prj="prj"></temp>
        </div>
      </div>
    </dv-border-box-12>
    <dv-border-box-12 backgroundColor="#19233Ddf" style="width: 1400px;padding: 20px;height:550px;margin-left: 30px"  >
      <div class="bg-color-black" >
        <div class="d-flex jc-center body-box">
          <div style="width: 100%;height: 530px;position: absolute;top: 0px;left: 0px;z-index:999" id="cesiumContainer">

          </div>
          <dv-border-box-12 backgroundColor="#19233Ddf" style="width: 300px;padding: 20px;height:450px;overflow-y:auto;margin-left: 30px;position: absolute;top: 10px;left: 10px;z-index:1000"  >
            <div class="bg-color-black" >
              <div class="d-flex jc-center body-box" style="display: flex;flex-direction: column;justify-content: left;">
                <div style="color: white;font-size: 18px;font-weight: bold;margin-bottom: 10px;margin-left: 140px">图例</div>
                <div v-for="(item,index) in this.content.STRA" :key="index" style="display: flex;flex-direction: row">
                  <div :style="{'width':'12px','height':'12px','background-color':item.STRA_TYPE}"></div>
                  <div style="margin-left: 10px;color: white;font-size: 12px"> {{item.STRA_NAME}}</div>
                </div>
              </div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </dv-border-box-12>
  </div>

</template>
<script>
import  temp from "../temp";
import drawPolyView from "../d3/drawPolyView"
let viewer = null;
import axios from "axios";
import * as Cesium from "cesium/Cesium";
import drawTunnel from "../d3/drawTunnel";
import Util_Projection from "../d3/Util_Projection";
import sub_dataview from "../sub_dataview";
import vkbeautify from "vkbeautify";
import x2js from "x2js";
import profile_model from "../profile_model"
let x2jsObj = new x2js();
let baseUrl = "";
let prjCode = "laoying";
let tool =null;

let offset = {
  "offset_x": 10513377.99,
  "offset_y": 113603.0543,
  "offset_z": 70
};

export default {
  components:{temp},
  props:["prj"],
  data(){
    return {
      defs:[],
      MILLdata: null,
      mileage:null,
      LNTY:null,
      entity:[],
      struction:["内轮廓","建筑限界","初衬","二衬"],
      pathArr:[],
      matchedInfo:{},
      selectFile:null,
      id : 0,
      refreshing:true,
      nodeList : [
        {
          'id': 'n1',
          'width': 200,
          'height': 32,
          'coordinate': [20,30],
          'meta': {
            'prop': 'green',
            'name': '钻孔基本信息(HDPH)',
            "type":"table",
            "data":null
          }
        },
        {
          'id': 'n2',
          'width': 200,
          'height': 32,
          'coordinate': [20,90],
          'meta': {
            'prop': 'green',
            'name': '位置信息(LOCA)',
            "type":"table",
            "data":null
          }
        },
        {
          'id': 'n3',
          'width': 250,
          'height': 30,
          'coordinate': [300,60],
          'meta': {
            'prop': 'orange',
            'name': '钻孔点位信息',
            "type":"json",
            "data":null
          }
        },
        {
          'id': 'n4',
          'width': 250,
          'height': 30,
          'coordinate': [300,120],
          'meta': {
            'prop': 'green',
            'name': '钻孔地层信息（HDPF）',
            "type":"table",
            "data":null
          }
        },
        {
          'id': 'n5',
          'width': 250,
          'height': 30,
          'coordinate': [650,90],
          'meta': {
            'prop': 'orange',
            'name': '钻孔地层三维模型',
            "type":"json",
            "data":null
          }
        },
        {
          'id': 'n6',
          'width': 250,
          'height': 30,
          'coordinate': [650,150],
          'meta': {
            'prop': 'green',
            'name': '地层基本信息（STRA）',
            "type":"table",
            "data":null
          }
        },
        {
          'id': 'n7',
          'width': 200,
          'height': 30,
          'coordinate': [1000,120],
          'meta': {
            'prop': 'orange',
            'name': '钻孔地层查询模型',
            "type":"json",
            "data":null
          }
        }
      ],
      linkList : [
        {
          'id': 'l1',
          'startId': 'n1',
          'endId': 'n3',
          'startAt': [150, 15],
          'endAt': [0, 15],
          'meta': null
        },
        {
          'id': 'l2',
          'startId': 'n2',
          'endId': 'n3',
          'startAt': [150, 15],
          'endAt': [0, 15],
          'meta': null
        },
        {
          'id': 'l3',
          'startId': 'n3',
          'endId': 'n5',
          'startAt': [150, 15],
          'endAt': [0, 15],
          'meta': null
        },
        {
          'id': 'l4',
          'startId': 'n4',
          'endId': 'n5',
          'startAt': [150, 15],
          'endAt': [0, 15],
          'meta': null
        },
        {
          'id': 'l5',
          'startId': 'n5',
          'endId': 'n7',
          'startAt': [150, 15],
          'endAt': [0, 15],
          'meta': null
        },
        {
          'id': 'l6',
          'startId': 'n6',
          'endId': 'n7',
          'startAt': [150, 15],
          'endAt': [0, 15],
          'meta': null
        }
      ],
      colors:[],
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    getColor(color){
      let cesium_color ="0xff"+color.substring(5,7)+color.substring(3,5)+color.substring(1,3);
      return cesium_color;
    },
    drawBorehole_text(){
      let icon ="static/image/cesium/flag.png";
      let image = new Image();
      let that = this;
      image.crossOrigin = '';
      image.src = icon;

      this.content.n7.forEach(bhl=> {

        let x = bhl.LOCA.LOCA_NATN + offset.offset_x;
        let y = bhl.LOCA.LOCA_NATE + offset.offset_y;
        let res = Util_Projection.webMercator2LngLat(x, y);
        let lng = res[0];
        let lat = res[1];
        let zTop = parseFloat(bhl.HDPH_TOP)
        console.log(lng, lat);
        //加顶部标签
        let options = {
          id: bhl.HDPH_ID,
          name: bhl.HDPH_ID,
          position: Cesium.Cartesian3.fromDegrees(lng, lat, zTop + offset.offset_z),
          //立广告牌
          billboard: {
            image: image,   //static/imgs/cesium/risk.png
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            show: true, // default
            width: 32, // default: undefined
            height: 32,
            scale: 1,
            disableDepthTestDistance: Number.POSITIVE_INFINITY   //去除被遮挡
          },
          //字体标签样式
          label: {
            font: 'normal 32px MicroSoft YaHei',
            color: Cesium.Color.WHITE,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            showBackground: true,
            backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.5),
            backgroundPadding: new Cesium.Cartesian2(10, 10),
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(15, -10), // 调整偏移位置
            disableDepthTestDistance: Number.POSITIVE_INFINITY   //去除被遮挡
          }
        };
        options.label.text = bhl.HDPH_ID;
        options.label.scaleByDistance = new Cesium.NearFarScalar(1000, 0.7, 2000, 0.3);
        viewer.entities.add(options);
      })
    },
    drawBorehole(){
      let icon ="static/image/cesium/flag.png";
      let image = new Image();
      let that = this;
      image.crossOrigin = '';
      image.src = icon;

      this.content.n7.forEach(bhl=>{

        let x = bhl.LOCA.LOCA_NATN+offset.offset_x;
        let y = bhl.LOCA.LOCA_NATE+offset.offset_y;
        let res = Util_Projection.webMercator2LngLat(x,y);
        let lng = res[0];
        let lat = res[1];
        let zTop=parseFloat(bhl.HDPH_TOP)
        console.log(lng,lat);

        //绘制钻孔地层
        bhl.HDPF.forEach(hdpf=>{
          let zBottom = hdpf.HDPF_TOP;
          let zTop = hdpf.HDPF_BASE;

          let radius  =10;
          var entity = viewer.entities.add({
            name : 'Green cylinder with black outline',
            position: Cesium.Cartesian3.fromDegrees(lng, lat, zBottom+(zTop-zBottom)/2+offset.offset_z),
            cylinder : { //圆柱
              length : zTop-zBottom,
              topRadius : radius,
              bottomRadius : radius,
              material : Cesium.Color.fromRgba(this.getColor(hdpf.STRA.STRA_TYPE)),
            }
          });
        })
      })
      viewer.flyTo(viewer.entities);
    },
    initScene() {
      let options = {
        animation:false,   //如果设置为false，则不会创建'动画'小部件。
        baseLayerPicker:false,   //如果设置为false，则不会创建BaseLayerPicker小部件
        fullscreenButton:false,  //如果设置为false，将不会创建FullscreenButton小部件。
        vrButton:false,     //如果设置为true，将创建VRButton小部件。
        geocoder:false,     //如果设置为false，则不会创建Geocoder小部件。
        homeButton:false,      //如果设置为false，将不会创建HomeButton小部件。 -----------
        infoBox:false,         //如果设置为false，则不会创建InfoBox小部件。
        sceneModePicker:false,      //
        timeline:false,
        navigationHelpButton:false,
        navigationInstructionsInitiallyVisible:false,  //如果导航说明最初应该是可见的，则为true；如果直到用户明确单击该按钮，则不显示该说明，否则为false。
        terrainProvider:new Cesium.CesiumTerrainProvider({
          url:Cesium.IonResource.fromAssetId(1),
          requestWaterMask:true,
          requestVertexNormals: true
        })
      };
      viewer = new Cesium.Viewer("cesiumContainer", options);
      viewer._cesiumWidget._creditContainer.style.display = "none";

      viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
      //地表透明
      viewer.scene.globe.translucency.enabled = true;
      viewer.scene.globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
        1000.0,
        0.6,
        5000.0,
        0.8
      );

      viewer.camera.setView(this.defaultView());
      },
    defaultView(){
      let data =  {"cameraLng":99.13359815796219,"cameraLat":25.3540026223,"cameraHeight":7123.054636944723,"cameraHeading":7.129119001219416,"cameraPitch":-32.26971686203067,"cameraRoll":0.024972625513546606};
      return  {
        lookAt:false,
        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
        // fromDegrees()方法，将经纬度和高程转换为世界坐标
        destination:Cesium.Cartesian3.fromDegrees(data.cameraLng,data.cameraLat,data.cameraHeight),
        orientation:{
          // 指向
          heading:Cesium.Math.toRadians(data.cameraHeading),
          // 视角
          pitch:Cesium.Math.toRadians(data.cameraPitch),
          roll:Cesium.Math.toRadians(data.cameraRoll)
        }
      }
    },
    setContent(id,data){
      let find = this.nodeList.find(x=>x.id==id);
      if (find){
        find.meta.data = data;
      }
    },
    init(){
      this.content = {};
      let p1=axios.get(`/api/prj/data?code=${this.prj}&objCode=HDPH`)
      let p2=axios.get(`/api/prj/data?code=${this.prj}&objCode=LOCA`)
      let p3=axios.get(`/api/prj/data?code=${this.prj}&objCode=HDPF`)
      let p4=axios.get(`/api/prj/data?code=${this.prj}&objCode=STRA`)
      Promise.all([p1,p2,p3,p4])
      .then(
        res=>{
          this.content.HDPH = res[0].data;
          this.content.LOCA = res[1].data;
          this.content.HDPF = res[2].data;
          this.content.STRA = res[3].data;

          this.content.n3 = JSON.parse(JSON.stringify(res[0].data));
          //钻孔点位
          this.content.n3.forEach(one=>{
            one.LOCA =  this.content.LOCA.find(x=>x.LOCA_ID==one.LOCA_ID);
          })
          //钻孔地层模型

          this.content.n5 = JSON.parse(JSON.stringify(this.content.n3));
          this.content.n5.forEach(one=>{
            one.HDPF=[];
            for (let i=0;i<res[2].data.length;i++){
              if (res[2].data[i].HDPH_ID==one.HDPH_ID){
                one.HDPF.push(res[2].data[i]);
              }
            }
          })

          this.content.n7 = JSON.parse(JSON.stringify(this.content.n5));
          this.content.n7.forEach(one=>{
            one.HDPF.forEach(two=>{
              for (let i=0;i<res[3].data.length;i++){
                if (res[3].data[i].STRA_ID==two.STRA_ID){
                  two.STRA = res[3].data[i];
                }
              }
            })

          })


          //钻孔地层+地层信息
          this.setContent("n1",this.content.HDPH);
          this.setContent("n2",this.content.LOCA);
          this.setContent("n3",this.content.n3);
          this.setContent("n4",this.content.HDPF);
          this.setContent("n5",this.content.n5);
          this.setContent("n6",this.content.HDPF);
          this.setContent("n7",this.content.n7);

          console.log(this.nodeList);
          this.refreshing=false;

          this.$nextTick(()=>{
            this.initScene();

            this.drawBorehole();

            this.$nextTick(()=>{
              this.drawBorehole_text();
            })
          })
        }
      )
    }
  }
}
</script>
